<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div
    class="ui-flexbox"
    :class="[
      'p-' + info.extension.padding.value,
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
      info.extension.shadow.value,
      info.extension.border.value,
      info.extension.rounded.value,
      info.extension.bg.value,
    ]"
    :style="{
      height: info.extension.showAuto?.value ? `${info.extension.autoHeight?.value}px` : `${info.extension.boxHeight.value}vh`,
      background: `url('${info.extension.backgroundImg.value}')`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: info.extension.backgroundSize.value,
      backgroundPosition: 'center',
    }"
  >
    <Widget
      class="flex"
      :class="['justify-' + info.extension.justifyAlign.value, 'flex-' + info.extension.flexDer.value]"
      :list="info.list"
      :style="{
        alignItems: info.extension.itemsAlign.value,
      }"
    />
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiImgCard',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin],
    watch: {
      info: {
        handler() {
          // console.log(val, '999999999999')
          this.$forceUpdate()
        },
        deep: true,
      },
    },
  })
</script>
<style>
  .uiImgCard {
    width: 100%;
  }
</style>
